<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{stock.name}} - Detail</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin-bottom: 5px;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline; 
        }
    </style>
</head>
<body>
    <h1>{{stock.name}}({{stock.ts_code}})</h1>
    <p>Area: {{stock.area}}</p>
    <p>Industry: {{stock.industry}}</p>
    <p>List Date: {{stock.list_date}}</p>
    <h2>Stock Info</h2>
    <table border="1">
    <ul>
        <tr>
            <th>Date</th>
            <th>Open</th>
            <th>High</th>
            <th>Low</th>
            <th>Close</th>
            <th>Pre_Close</th>
            <th>Change</th>
            <th>Pct_Chg</th>
            <th>Vol</th>
            <th>Amount</th>
        </tr>
        {% for info in stock_info %}
            <tr>
                <td>{{ info.trade_date }}</td>
                <td>{{ info.open }}</td>
                <td>{{ info.high }}</td>
                <td>{{ info.low }}</td>
                <td>{{ info.close }}</td>
                <td>{{ info.pre_close }}</td>
                <td>{{ info.change }}</td>
                <td>{{ info.pct_chg }}</td>
                <td>{{ info.vol }}</td>
                <td>{{ info.amount }}</td>
            </tr>
        {% endfor %}
    </ul>
    </table>
    <a href="{% url 'stocks:stock_chart' stock.ts_code %}">View Chart</a>
</body>
</html>